<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        div{
            width:200px;
            height: 200px;
            border:1px solid red;
            margin-top:100px;
            margin-left: 100px;
        }
    </style>
    <script>

        //event只要触发了事件，就会产生事件对象，事件对象中包含了该事件的相关的信息
        // type 事件名称
        // target 触发事件的元素
        // clientX 返回当事件被触发时，鼠标指针的水平坐标。
        // clientY  返回当事件被触发时，鼠标指针的垂直坐标。


        window.onload=function(){
            var mydiv=document.getElementById("mydiv");//DOM对象
            mydiv.onclick=function(e){//事件触发时会自动为回调函数传入一个参数，表示event事件对象
                // console.log(e.type);
                console.log(e.target);
                console.log(e.clientX+"*"+e.clientY);
               
            };
        };

        function show(e,obj){
            console.log(e);//事件对象
            console.log(obj);//事件源
        }
    </script>
</head>
<body>
    <div id="mydiv">
    </div>
    <!-- 静态绑定事件时，可以在绑定回调函数时，接收event和this作为实际参数，名称必须是event和this -->
    <input type="button" id="btn" value="我是按钮" onclick="show(event,this)">
</body>
</html>